<include file="./Template/Admin/header.html" title="管理员列表" />
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>菜单列表</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row m-b-sm m-t-sm">
                            <div class="col-md-2">
                                <a href="javascript:add();" class="btn btn-outline btn-primary">添加菜单</a>
                            </div>
                        </div>
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>菜单名称</th>
                                    <th>链接</th>
                                    <th>排序</th>
                                    <th>类型</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="pageView">
                            <volist name="list" id="value">
                                <tr>
                                    <td>{$value.id}</td>
                                    <td>{$value.html}{$value.title}</td>
                                    <td>{$value.link}</td>
                                    <td>{$value.px}</td>
                                    <td>{$value.type}</td>
                                    <td>
                                        <if condition="$value.status eq 1">
                                            <a href="javascript:statusChange({$value.id});" class="btn btn-sm btn-outline btn-primary" id="status{$value.id}">正常</a>
                                        <else />
                                            <a href="javascript:statusChange({$value.id});" class="btn btn-sm btn-outline btn-danger" id="status{$value.id}">禁用</a>
                                        </if>
                                    </td>
                                    <td>
                                        <div class="col-md-12"><a class="btn btn-sm btn-outline btn-warning" href="javascript:addChild({$value.id});"><i class="fa fa-edit"></i> 添加子菜单</a><a class="btn btn-sm btn-outline btn-warning" href="javascript:edit({$value.id});"><i class="fa fa-edit"></i> 修改</a><a class="btn btn-sm btn-outline btn-danger" href="javascript:del({$value.id})"><i class="fa fa-trash-o"></i> 删除</a></div>
                                    </td>
                                </tr>
                            </volist>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="__ADMIN__js/jquery.min.js"></script>
    <script src="__ADMIN__js/bootstrap.min.js"></script>
    <script src="__ADMIN__js/plugins/layer.3/layer.js"></script>
    <script src="__ADMIN__js/plugins/laypage/laypage.js"></script>
    <script src="__ADMIN__js/common.js"></script>
    <script src="__ADMIN__js/plugins/switchery/switchery.js"></script>

    <script>
        $(function(){
            /**
             * 更改管理员状态
             */
            statusChange = function(id){
                common.ajaxStatusChange("{:U('Admin/Menu/statusChange')}", id, $('#status' + id));
            };

            /**
             * 删除管理员
             * @param id
             */
            del = function(id){
                common.ajaxDel("{:U('Admin/Menu/del')}",id,"{:U('Admin/Menu/index')}");
            };
        });

        var eid = 0;
        var pid = 0;
        /**
         * 添加修改弹窗
         * (有待改进)
         */
        function add(id){
            layer.open({
                type: 1,
                skin: 'layui-layer-demo', //样式类名
                closeBtn: 1, //不显示关闭按钮
                area: ['580px', '640px'], //宽高
                anim: 2,
                shadeClose: true, //开启遮罩关闭
                content: '' +
                '<body class="gray-bg"> ' +
                '<div class="wrapper wrapper-content animated fadeInRight"> ' +
                '<div class="row"> ' +
                '<div class="col-sm-12"> ' +
                '<div class="ibox float-e-margins"> ' +
                '<div class="ibox-title"> ' +
                '<h5>添加菜单</h5> ' +
                '</div> ' +
                '<div class="ibox-content"> ' +
                '<form class="form-horizontal m-t" id="addForm" method="post" action="{:U("Admin/Menu/Save")}"> ' +
                '<div class="form-group"> ' +
                '<label class="col-sm-3 control-label">菜单名称:</label>' +
                '<div class="col-sm-8"> ' +
                '<input id="title" name="title" class="form-control"  type="text"> ' +
                '<span class="help-block m-b-none"></span>' +
                '</div> ' +
                '</div> ' +
                '<div class="hr-line-dashed"></div> ' +
                '<div class="form-group"> ' +
                '<label class="col-sm-3 control-label">链接:</label>' +
                '<div class="col-sm-8"> ' +
                '<input id="link" name="link" class="form-control"  type="text"> ' +
                '<span class="help-block m-b-none"></span>' +
                '</div> ' +
                '</div> ' +
                '<div class="hr-line-dashed"></div> ' +
                '<div class="form-group"> ' +
                '<label class="col-sm-3 control-label">排序:</label>' +
                '<div class="col-sm-8"> ' +
                '<input id="px" name="px" class="form-control"  type="text"> ' +
                '<span class="help-block m-b-none"></span>' +
                '</div> ' +
                '</div> ' +
                '<div class="hr-line-dashed"></div> ' +
                '<div class="form-group"> ' +
                '<label class="col-sm-3 control-label">状态:</label>' +
                '<div class="col-sm-8"> ' +
                '<input type="checkbox" class="js-switch form-control" value="1" data-value="{$ruleInfo.status}" name="status" id="status" /> ' +
                '</div> ' +
                '</div> ' +
                '<div class="hr-line-dashed"></div> ' +
                '<div class="form-group"> ' +
                '<div class="col-sm-8 col-sm-offset-3"> ' +
                '<button class="btn btn-primary" id="submit" type="submit">提交</button> ' +
                '</div> ' +
                '</div> ' +
                '</form>' +
                '</div> ' +
                '</div> ' +
                '</div> ' +
                '</div> ' +
                '</div> ' +
                '<script>' +
                'var elem = document.querySelector(".js-switch");' +
                'var init = new Switchery(elem);' +
                '<\/script>'
            });


            $('button#submit').click(function(){
                var objectArr = $('#addForm').serializeArray();
                    var data = new Object();
                    $.each(objectArr,function(k,v){
                        data[v.name] = v.value;
                    });
                /*var data = new  FormData(document.getElementById('addForm'));*/
                data['id'] = eid;
                data['pid'] = pid;

                $.ajax({
                    url:$('#addForm').attr('action'),
                    type:"post",
                    data:data,
                    success:function(data){
                        if(data.status > 0){
                            common.error(data.msg);
                        }else{
                            common.success(data.msg,"{:U('Admin/Menu/index')}");
                        }
                    },
                    dataType:'JSON'
                });
                return false;
            });
        }
        function edit(id){
            $.post(
                "{:U('Admin/Menu/getMenu')}",
                {id:id},
                function(data){
                    eid = data.data[0].id;
                    pid = data.data[0].pid;
                    add();

                    $('#title').val(data.data[0].title);
                    $('#link').val(data.data[0].link);
                    $('#px').val(data.data[0].px);
                    $('#status').prop('checked',parseInt(data.data[0].status) ? true : false);
                    $(elem).siblings().remove();
                    var init = new Switchery(elem);
                }
            );
        }
        function addChild(id){
            eid = 0;
            pid = id;
            add();
        }
    </script>
</body>
</html>
